<template>
  <div class="main-main">
    <el-tabs v-model="activeName">
      <el-tab-pane class="container-fluid" label="能力测评" name="能力测评">
        <div class="row  mb-1">
          <div class="col text-right">
            <el-button @click="save()" type="primary">保存能力测评</el-button>
          </div>
        </div>
        <el-form :model="update1" label-width="80px">
          <div>
            <el-form-item label="名称">
              <el-button @click="test1.push({ name: '', url: '' })" type="primary">增加</el-button>
              <el-button @click="test1.pop()" type="danger">删除</el-button>
            </el-form-item>
          </div>
          <div v-for="(v, i) in test1" :key="`questionbank` + i">
            <el-form-item label="名称">
              <el-input v-model="v.name"></el-input>
            </el-form-item>
            <el-form-item label="url">
              <el-input v-model="v.url"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane class="container-fluid" label="更新记录" name="更新记录">
        <div class="row mb-1">
          <div class="col text-right">
            <el-button @click="save()" type="primary">保存更新记录</el-button>
          </div>
        </div>
        <div class="row  mb-1">
          <el-form :model="update1" label-width="80px">
            <el-form-item label="名称">
              <el-input v-model="update1.name"></el-input>
            </el-form-item>
            <el-form-item label="url">
              <el-input v-model="update1.url"></el-input>
            </el-form-item>
            <div>
              <el-form-item label="名称">
                <el-button @click="update1.list?.push({ name: '', url: '' })" type="primary">增加</el-button>
                <el-button @click="update1.list?.pop()" type="danger">删除</el-button>
              </el-form-item>
            </div>
            <div class="container-fluid" v-for="(v, i) in update1.list" :key="i">
              <el-form-item label="名称">
                <el-input v-model="v.name"></el-input>
              </el-form-item>
              <el-form-item label="url">
                <el-input v-model="v.url"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane class="container-fluid" label="Banner配置" name="Banner配置">
        <div class="row  mb-1">
          <div class="col text-right">
            <el-button @click="save()" type="primary">保存Banner配置</el-button>
          </div>
        </div>
        <div class="row  mb-1">
          <el-form :model="update1" label-width="80px">


            <el-form-item label="名称">
              <el-button @click="banner?.push({ image: '', url: '' })" type="primary">增加</el-button>
              <el-button @click="banner?.pop()" type="danger">删除</el-button>
            </el-form-item>

            <div class="container-fluid" v-for="(v, i) in banner" :key="i">
              <el-form-item label="图片地址">
                <el-input v-model="v.image"></el-input>
              </el-form-item>
              <el-form-item label="url">
                <el-input v-model="v.url"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane class="container-fluid" label="其他信息" name="其他信息">
        <div class="row  mb-1">
          <div class="col">
            <el-button @click="option?.push({ name: '', list: [] })" type="primary">+ 新增</el-button>
            <el-button @click="option?.pop()" type="danger">+ 删除</el-button>
          </div>
          <div class="col text-right">
            <el-button @click="save()" type="primary">保存比赛设置</el-button>
          </div>
        </div>
        <el-form :model="update1" label-width="80px">
          <div class="row  mb-1">
            <div class="col" v-for="(v, i) in option" :key="'1_' + i">
              <el-form-item label="名称">
                <el-input v-model="v.name"></el-input>
              </el-form-item>
              <el-button @click="v.list?.push({ url: '', name: '' })" type="primary">增加</el-button>
              <el-button @click="v.list?.pop()" type="danger">删除</el-button>
              <div class="container-fluid">
                <div v-for="(n, f) in v.list" :key="'2_' + i + '_' + f">
                  <el-form-item label="名称">
                    <el-input v-model="n.name"></el-input>
                  </el-form-item>
                  <el-form-item label="url">
                    <el-input v-model="n.url"></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { asyncchangesetup } from "../../api";
import { onMounted } from "vue";
import { ref } from "vue";
import Studycodemodel from "../../mysql_interface/studycodemodel";
import { ElMessage } from "element-plus";



const activeName = ref("更新记录");
const update1 = ref<Studycodemodel.Isetup["banner"]["update1"]>({
  url: "",
  name: "",
  list: [],
});

const banner = ref<Studycodemodel.Isetup['banner']['banner']>([])

const test1 = ref<Studycodemodel.Isetup["banner"]["test1"]>([]);
const option = ref<Studycodemodel.Isetup["banner"]["option"]>([]);
async function save() {
  await asyncchangesetup({
    banner: {
      update1: update1.value,
      option: option.value,
      test1: test1.value,
      banner: banner.value
    },
  })
    .then(() => {
      start();
      ElMessage.success("保存成功");
    })
    .catch((e) => {
      ElMessage.error(e);
    });
}
onMounted(() => {
  start();
});

async function start() {
  const data = await asyncchangesetup();
  if (data.banner.update1) {
    update1.value = data.banner.update1;
  }
  if (data.banner.option) {
    option.value = data.banner.option;
  }
  if (data.banner.test1) {
    test1.value = data.banner.test1;
  }
  if (data.banner.banner) {
    banner.value = data.banner.banner
  }
}

</script>

<style scoped>
.upload .el-upload-dragger {
  width: 180px;
}

.name {
  width: 120px;
}

.d-inline-block {
  margin-right: 10px;
}

.bannner-image {
  width: 425px;
  height: 87.5px;
}

.competition-image {
  width: 256px;
  height: 153px;
}
</style>